<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #mainContainer {
            width: 750px;
            height: 2000px;
            background-color: rgb(244, 244, 244);
            margin: 0 auto;
            margin-top: 80px;
        }

        #headerArea {
            width: 750px;
            height: 80px;
            display: flex;
            background-color: white;
            position: fixed;
            top: 0;
        }

        #searchInputBox {
            width: 600px;
            height: 50px;
            border: 1px solid;
            margin: 15px;
        }

        #searchInputBox input {
            width: 598px;
            height: 48px;
        }

        #userInfoSection {
            width: 120px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #userProfileAvatar {
            width: 55px;
            height: 55px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-sprite.png);
            background-position: -115px -380px;
            background-repeat: no-repeat;
        }

        #myAccountText {
            width: 60px;
            height: 25px;
            color: rgb(9, 159, 222);
            font-weight: 500;
            text-align: center;
        }

        #pageTitleImage {
            width: 750px;
            height: 150px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-focus.jpg);
            background-repeat: no-repeat;
        }

        #navigationMenu {
            display: flex;
            width: 740px;
            height: 100px;
            border-radius: 5px;
            margin: 5px 5px 0px;
            background-color: white;
        }

        .navMenuItem {
            width: calc(740px / 5);
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

        .navMenuImage {
            width: 70px;
            height: 65px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-localnav_bg.png);
            background-repeat: no-repeat;
        }

        .navMenuItemText {
            width: 148px;
            height: 25px;
            text-align: center;
        }

        #hotelSectionArea {
            width: 740px;
            height: 460px;
            margin: 5px 5px 0px;
        }

        .hotelRowGroup {
            height: calc(450px / 3);
            width: 740px;
            display: flex;
        }

        .hotelRowFirstStyle {
            background-color: rgb(250, 139, 80);
            border-radius: 5px 5px 0px 0px;
            margin-bottom: 5px;
        }

        .hotelRowSecondStyle {
            background-color: rgb(83, 186, 237);
        }

        .hotelRowThirdStyle {
            background-color: rgb(98, 209, 110);
            border-radius: 0px 0px 5px 5px;
            margin-top: 5px;
        }

        .hotelColumnGroup {
            width: 1fr;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .hotelColumnFirstDivStyle {
            width: 246px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: rgb(255, 255, 255);
            font-size: 20px;
        }

        .hotelColumnSecondDivStyle {
            width: 246px;
            height: 110px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-hotel.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }

        .hotelColumnDivStyle {
            width: 246px;
            height: 75px;
            text-align: center;
            line-height: 75px;
            color: rgb(255, 255, 255);
            font-size: 20px;
        }

        .hotelColumnDivFirstStyle {
            border-left: 1px solid white;
            border-bottom: 1px solid white;
        }

        .hotelColumnDivSecondStyle {
            border-left: 1px solid white;
        }

        #paymentSectionArea {
            width: 740px;
            height: 160px;
            margin: 5px 5px 0;
            background-color: white;
            border-radius: 10px;
        }

        .paymentTopGroup,
        .paymentBottomGroup {
            width: 740px;
            height: 80px;
            display: flex;
            justify-content: space-evenly;
        }

        .paymentTopItemGroup,
        .paymentBottomItemGroup {
            width: 70px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .paymentIconImage {
            width: 45px;
            height: 35px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-subnav-bg.png);
            background-position: 0 0;
        }

        .paymentIconImage+div {
            width: 70px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        #hotEventsArea {
            width: 740px;
            height: 700px;
            margin: 5px 5px 0px;
            background-color: white;
            display: flex;
            flex-direction: column;
        }

        #hotEventsTopSection {
            width: 740px;
            height: 100px;
            border-top: 2px solid grey;
            border-bottom: 2px solid grey;
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
        }

        #hotEventsTopImageSection {
            width: 150px;
            height: 50px;
            background-image: url(https://oss.9ihub.com/test/xiecheng-hot.png);
            background-position: 0 -30px;
            background-repeat: no-repeat;
        }

        #hotEventsTopTextSection {
            width: 230px;
            height: 50px;
            background-color: rgb(248, 86, 116);
            line-height: 50px;
            font-size: 20px;
            color: white;
            font-weight: 500;
            border-radius: 50px;
            text-align: center;
        }

        #hotEventsBottomSection {
            width: 740px;
            height: 600px;
            display: flex;
            flex-direction: column;
        }

        #hotEventsBottomSection div {
            width: 740px;
            display: flex;
        }

        .activityFirstGroup,
        .activitySecondGroup,
        .activityThirdGroup {
            width: 740px;
            border-bottom: 1px solid grey;
        }

        .activityFirstGroup {
            height: 300px;
        }

        .activitySecondGroup,
        .activityThirdGroup {
            height: 150px;
        }

        .activityFirstGroup,
        .activitySecondGroup,
        .activityThirdGroup {
            width: 370px;
        }

        .activityItemStyle {
            background-size: cover;
        }

        [class$=ts] {
            border-left: 1px solid grey;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div id="mainContainer">
        <div id="headerArea">
            <div id="searchInputBox">
                <input type="text" name="" id="">
            </div>
            <div id="userInfoSection">
                <div id="userProfileAvatar"></div>
                <div id="myAccountText">我&emsp;的</div>
            </div>
        </div>
        <div id="pageTitleImage">
        </div>
        <div id="navigationMenu">
            <div class="navMenuItem">
                <div class="navMenuImage" style="background-position: 0 0;"></div>
                <div class="navMenuItemText">景点.玩乐</div>
            </div>
            <div class="navMenuItem">
                <div class="navMenuImage" style="background-position: 0 -64px;"></div>
                <div class="navMenuItemText">景点.玩乐</div>
            </div>
            <div class="navMenuItem">
                <div class="navMenuImage" style="background-position: 0 -128px;"></div>
                <div class="navMenuItemText">景点.玩乐</div>
            </div>
            <div class="navMenuItem">
                <div class="navMenuImage" style="background-position: 0 -192px;"></div>
                <div class="navMenuItemText">景点.玩乐</div>
            </div>
            <div class="navMenuItem">
                <div class="navMenuImage" style="background-position: 0 -256px;"></div>
                <div class="navMenuItemText">景点.玩乐</div>
            </div>
        </div>
        <div id="hotelSectionArea">
            <div class="hotelRowGroup hotelRowFirstStyle">
                <div class="hotelColumnGroup">
                    <div class="hotelColumnFirstDivStyle">海外酒店</div>
                    <div class="hotelColumnSecondDivStyle"></div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
            </div>
            <div class="hotelRowGroup hotelRowSecondStyle">
                <div class="hotelColumnGroup">
                    <div class="hotelColumnFirstDivStyle">海外酒店</div>
                    <div class="hotelColumnSecondDivStyle"></div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
            </div>
            <div class="hotelRowGroup hotelRowThirdStyle">
                <div class="hotelColumnGroup">
                    <div class="hotelColumnFirstDivStyle">海外酒店</div>
                    <div class="hotelColumnSecondDivStyle"></div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
                <div class="hotelColumnGroup">
                    <div class="hotelColumnDivStyle hotelColumnDivFirstStyle">海外酒店</div>
                    <div class="hotelColumnDivStyle hotelColumnDivSecondStyle">特价酒店</div>
                </div>
            </div>
        </div>
        <div id="paymentSectionArea">
            <div class="paymentTopGroup">
                <div class="paymentTopItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentTopItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentTopItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentTopItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentTopItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
            </div>
            <div class="paymentBottomGroup">
                <div class="paymentBottomItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentBottomItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentBottomItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentBottomItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
                <div class="paymentBottomItemGroup">
                    <div class="paymentIconImage"></div>
                    <div>电话费</div>
                </div>
            </div>
        </div>
        <div id="hotEventsArea">
            <div id="hotEventsTopSection">
                <div id="hotEventsTopImageSection"></div>
                <div id="hotEventsTopTextSection">获取更多福利&emsp;></div>
            </div>
            <div id="hotEventsBottomSection">
                <div class="activityFirstGroup">
                    <div class="activityItemStyle"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic1.jpg);"></div>
                    <div class="activityItemStyle ts"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic2.jpg);"></div>
                </div>
                <div class="activitySecondGroup">
                    <div class="activityItemStyle"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic3.jpg);"></div>
                    <div class="activityItemStyle ts"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic4.jpg);"></div>
                </div>
                <div class="activityThirdGroup">
                    <div class="activityItemStyle"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic5.jpg);"></div>
                    <div class="activityItemStyle ts"
                        style="background-image: url(https://oss.9ihub.com/test/xiecheng-pic6.jpg);"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>